<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Test</title>
	<style>
		*{padding: 0;margin: 0}
		.imgBox{
			width: 100%
		}
		.imgBox ul{
			width: 100%;
			display: flex;
			flex-direction: row;
			background: #fff;
			flex-wrap:wrap;
		}
		.imgBox ul li{
			list-style: none;box-sizing: border-box;border: 1px solid #ccc;
			text-align: center;
			margin: 0 0.166666% 10px
		}
		.imgBox ul li.w100{
			width: 100%;
		}
		.imgBox ul li.w48{
			width: 48%
		}
		.imgBox ul li.w33{width: 33%}
	</style>
</head>
<body>
	<div class="imgBox">
		<ul>
			<li class="imgLi">1</li>
			<li class="imgLi">1</li>
			<li class="imgLi">1</li>
			<li class="imgLi">1</li>
			<li class="imgLi">1</li>
			<li class="imgLi">1</li>
			<li class="imgLi">1</li>
			<li class="imgLi">1</li>
		</ul>
	</div>
	<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
	<script>
		window.onload = function(){
			var imgBoxLi = $('.imgLi');
			var _length = parseInt(imgBoxLi.length/3);
			var length = imgBoxLi.length%3;
			if(_length === 0){
				switch(length){
					case 0:
					imgBoxLi.addClass('w33')
					break;
					case 1:
					imgBoxLi.addClass('w100')
					break;
					case 2:
					imgBoxLi.addClass('w48')
				}
			}else{
				imgBoxLi.addClass('w33')
			}

		}
	</script>
</body>
</html>